<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv">
                <div class="row-left">
                    <div class="row-item">
                        上级仓库：
                        <el-select
                                v-model="state.wareparent"
                                multiple
                                placeholder="选择上级仓库"
                        >
                            <el-option label="上级1" value="1"></el-option>
                            <el-option label="上级2" value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="row-item">
                        仓库类型：
                        <el-select
                                v-model="state.waretype"
                                placeholder="选择仓库类型"
                        >
                            <el-option label="仓库1" value="1"></el-option>
                            <el-option label="仓库2" value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="row-item">
                        绑定门店：
                        <el-select
                                v-model="state.bindstore"
                                placeholder="选择绑定门店"
                        >
                            <el-option label="门店1" value="1"></el-option>
                            <el-option label="门店2" value="2"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row-right">
                    <el-button size="small" type="primary" @click="resetFields()"
                    >重置
                    </el-button
                    >
                    <el-button size="small" type="primary" @click="new_set_ware()"
                    >创建仓库
                    </el-button
                    >
                </div>
            </div>
            <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
                <el-table-column fixed prop="id" label="仓库ID"></el-table-column>
                <el-table-column prop="type" label="仓库类型"></el-table-column>
                <el-table-column prop="name" label="仓库名称"></el-table-column>
                <el-table-column prop="owner" label="所属人"></el-table-column>
                <el-table-column prop="supplier" label="关联物流商"></el-table-column>
                <el-table-column prop="count" label="商品数"></el-table-column>
                <el-table-column prop="contact" label="联系人"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="address" label="仓库地址"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button
                                @click.native.prevent="new_set_ware(scope.row)"
                                type="text"
                                size="small"
                        >
                            编辑
                        </el-button>
                        <el-button
                                @click.native.prevent="detailRow(scope.row)"
                                type="text"
                                size="small"
                        >
                            详情
                        </el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.row)"
                                type="text"
                                size="small"
                        >
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新建仓库 -->
            <el-dialog
                    title="新建仓库"
                    v-model="state.new_dialogVisible"
                    width="450px"
                    center
            >
        <span>
          <el-form
                  :model="state.set_form"
                  :rules="state.rules"
                  ref="form"
                  label-width="100px"
                  class="demo-ruleForm"
          >
            <el-form-item label="仓库名称" prop="ware_name">
              <el-input v-model="state.set_form.ware_name"></el-input>
            </el-form-item>
            <el-form-item label="所属人" prop="belong_man">
             <el-select v-model="state.set_form.belong_man" placeholder="请选择所属人">
              <el-option label="区域一" value="1"></el-option>
              <el-option label="区域二" value="2"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="关联物流商" prop="relate_log">
             <el-select v-model="state.set_form.relate_log" placeholder="请选择物流商">
              <el-option label="区域一" value="1"></el-option>
              <el-option label="区域二" value="2"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="联系人" prop="contact_man">
              <el-input v-model="state.set_form.contact_man"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contact_phone">
              <el-input v-model="state.set_form.contact_phone"></el-input>
            </el-form-item>
            <el-form-item label="仓库地址" prop="ware_address">
              <el-input
                      type="textarea"
                      v-model="state.set_form.ware_address"
              ></el-input>
            </el-form-item>
          </el-form>
        </span>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="close()"
            >取 消</el-button
            >
            <el-button type="primary" @click="create_ware">确 定</el-button>
          </span>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import {ref, reactive, getCurrentInstance, onMounted} from "vue";
    import {useRouter} from "vue-router";
    import {ElNotification} from "element-plus";

    export default {
        name:"ware_manager",
        components: {},
        props: {},
        setup() {
            let form = ref(null);
            const router = useRouter();
            const {ctx} = getCurrentInstance();
            let state = reactive({
                id: 0,
                new_dialogVisible: false,
                wareparent: "",
                waretype: "",
                bindstore: "",
                set_form: {
                    ware_name: "",
                    belong_man: "",
                    relate_log: "",
                    contact_man: "",
                    contact_phone: "",
                    ware_address: "",
                },
                rules: {
                    ware_name: [
                        {required: true, message: "请填写仓库名称", trigger: "blur"},
                    ],
                    belong_man: [
                        {required: true, message: "请选择所属人", trigger: 'change'},
                    ],
                    relate_log: [
                        {required: true, message: "请选择物流商", trigger: 'change'},
                    ],
                    contact_man: [
                        {required: true, message: "请填写联系人", trigger: "blur"},
                    ],
                    contact_phone: [
                        {required: true, message: "请填写联系电话", trigger: "blur"},
                    ],
                    ware_address: [
                        {required: true, message: "请填写仓库地址", trigger: "blur"},
                    ],
                },
                tableData: [
                    {
                        id: 1,
                        type: "逻辑仓1",
                        name: "仓库名称",
                        owner: "王小虎",
                        supplier: "天津有限公司",
                        address: "上海市普陀区金沙江路 1518 弄",
                        phone: '1522222222',
                        contact: '张三',
                        count: 80,
                    },
                    {
                        id: 2,
                        type: "逻辑仓2",
                        name: "仓库名称",
                        owner: "王小",
                        supplier: "张华有限公司",
                        address: "上海市普陀区金沙江路 1518 弄",
                        phone: '1522222222',
                        contact: '张三',
                        count: 80,
                    },
                ],
            });

            // 重置
            function resetFields() {
                state.wareparent = "";
                state.waretype = "";
                state.bindstore = "";
            }

            // 关闭弹窗--并清除表单信息
            function close() {
                form.value.resetFields();
                state.new_dialogVisible = false;
            }

            // 查看详情
            function detailRow(item) {
                router.push({path: '/inventorymanager/ware_detail', query: {id: item.id}})
            }

            // 删除
            function deleteRow(item) {
                console.log(item)
                ElNotification.success("删除成功")
            }

            // 打开新建弹窗
            function new_set_ware(item) {
                if (item) { //编辑
                    state.set_form = {
                        ware_name: item.name,
                        belong_man: '1',
                        relate_log: '2',
                        contact_man: item.contact,
                        contact_phone: item.phone,
                        ware_address: item.address,
                    }
                    state.id = item.id
                } else { //创建
                    state.set_form = {
                        ware_name: "",
                        belong_man: "",
                        relate_log: "",
                        contact_man: "",
                        contact_phone: "",
                        ware_address: "",
                    }
                    state.id = 0
                }
                state.new_dialogVisible = true;
            }

            function create_ware() {
                var data = state.set_form, url
                if (state.id == 0) { //创建
                    url = '/add'
                } else {
                    url = '/edit'
                    data.id = state.id
                }

                form.value.validate((valid) => {
                    if (valid) {
                        console.log(data)
                        return
                        ctx.$http.post(url, data).then((res) => {
                            if (res.errno == 0) {
                                getOrderlist()
                                ElNotification.success(res.errmsg);
                            }
                        }).catch((err) => {
                            ElNotification.error(err);
                        });
                        close();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }

            // 创建仓库
            return {
                form,
                state,
                resetFields,
                detailRow,
                deleteRow,
                new_set_ware,
                close,
                create_ware
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .el-card {
            height: 100%;
            .rowDiv {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .row-left {
                    display: flex;
                    width: 60%;
                    justify-content: space-between;
                    .row-item {
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                        margin-right: 20px;
                    }
                }
                .row-right {
                    width: 20%;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
            .el-select {
                width: 100%;
            }
        }
    }
</style>